import React, {
	Component
} from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	List,
	Radio,
	Tools,
	Button,
} from 'weaver-mobile';
import '../../style/accountSetting.less';
const getLabel = Tools.getLabel;
const RadioItem = Radio.RadioItem;

@inject('accountSettingStore')
@observer
export default class AccountSetting extends Component {
	componentDidMount() {
		document.title = getLabel('516260','主从账号设置');
		this.props.accountSettingStore.init();
	}

	render() {
		const {
			accountSettingStore: store
		} = this.props, {
			showTypes,
			checkedShowType,
			onShowTypeChange,
			accountInfo,
			checkedAccount,
			showTypeDisabled,
			save,
			saveBtnDisabled,
		} = store;

		return (
			<div className='hrm-multi-account'>
				<div className='content'>
					<List renderHeader={() => getLabel('516721','多账号数据显示')}>
	      			  {showTypes.map(data => (
	      			    <RadioItem key={data.value} checked={checkedShowType === data.value} disabled={showTypeDisabled} onChange={() => onShowTypeChange(data.value)}>
	      			      {data.label}
	      			    </RadioItem>
	      			  ))}
	      			</List>
	      			<List renderHeader={() => getLabel('516722','当前使用账户')}>
	      			  {accountInfo.map(data => (
	      			    <RadioItem key={data.value} checked={checkedAccount === data.value} onChange={() => {store.checkedAccount = data.value}}>
	      			      {data.label}
	      			    </RadioItem>
	      			  ))}
	      			</List>
				</div> 
				<Button type="primary" className='save' onClick={save} disabled={saveBtnDisabled}>{getLabel(86,'保存')}</Button>
			</div>
		);
	}
}